<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-08-30 16:55:01 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-03-07 16:12:08 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day06：vue项目 - 详情页 + 登录注册</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><div style="line-height: 160%; box-sizing: content-box;"><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一、商品详情页跳转
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">二、命名视图
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">三、路由跳转
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">声明式跳转
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一）跳转方式
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">二）配置路由
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">三）项目中的使用
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">编程式跳转
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一）跳转方式
</a></li></ul></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">四、添加详情页组件及路由
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">五、获取详情页的数据
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">六、预览图片效果
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">七、详情页底部处理
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">八、详情页商品数据处理
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一、注册
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">二、登录
</a></li></ul></div><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、商品详情页跳转</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">需求
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">点击商品列表中的商品，跳转到详情页</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">根据点击商品的不同，打开的详情页渲染不同的数据</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">技术点
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">准备路由匹配的页面
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">详情页布局：<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">命名视图/多视图路由</strong>（一个路由控制多个视图的变化）</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">路由跳转</strong>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">跳转方式 - 确定好跳转方式</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">配置路由</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">详情页获取数据</strong>：匹配到一个路由时，使用$route.params.获取数据</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、命名视图</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">如果需要同时展示多个视图，而不是嵌套展示，这时就需要使用命名视图</li>
<li style="line-height: 160%; box-sizing: content-box;">命名视图可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口</li>
<li style="line-height: 160%; box-sizing: content-box;">如果 router-view 没有设置名字，那么默认为 default。<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"header"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"footer"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">一个视图使用一个组件渲染，所以，一个路由多个视图，就需要多个组件。此时需要使用 components 配置路由 (注意带上 s)<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Foo <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'../views/home/index.vue'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Footer <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'../components/footer'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Header <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'../components/header'</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> router = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> VueRouter({
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">routes</span>: [
    {
      <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/'</span>,
      <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">components</span>: {
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">default</span>: Foo,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">header</span>: Header,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">footer</span>: Footer
      }
    }
  ]
})
</code></pre>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、路由跳转</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">声明式跳转 - 标签跳转</li>
<li style="line-height: 160%; box-sizing: content-box;">编程式跳转 - js跳转</li>
<li style="line-height: 160%; box-sizing: content-box;">url解析<br/>
<img src="day06%EF%BC%9Avue%E9%A1%B9%E7%9B%AE%20-%20%E8%AF%A6%E6%83%85%E9%A1%B5%20+%20%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C.resources/AE91D59B-867B-49AA-B7A7-907F4ED3005C.png" height="840" width="1558"/></li>
</ol>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">声明式跳转</h3>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">一）跳转方式</h5>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">push跳转</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"路由"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">相当于调用了 router.push() 方法，这个值可以是一个字符串或者是描述目标位置的对象。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">表示<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">添加</strong>一个路由，<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">会产生历史记录</strong>，页面跳转之后<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">可以通过后退按钮返回</strong></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">replace跳转</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"路由"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">replace</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">相当于调用了 router.replace() 方法，这个值可以是一个字符串或者是描述目标位置的对象。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">表示<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">替换</strong>一个路由，<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">不会产生历史记录</strong>，页面跳转之后<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">无法通过后退按钮返回</strong></li>
</ul>
</li>
</ol>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">二）配置路由</h5>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">动态路由匹配</strong>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">一个组件，匹配多个同种模式的路由，每个路由之间由参数区分</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如：User组件，每个用户对应不同的ID，但是都需要User组件来渲染，可以使用动态路由进行匹配：<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">{path: '/user/:id'}</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">当匹配到一个路由时，可以使用<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$route.params.id</code>获取接收到的id信息</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">可以在一个路由中设置多段"路径参数"，对应的值都会设置到 $route.params 中。例如：</li>
</ul>
</li>
</ol>
<table style="margin: 2px 0 14px; color: #333; width: auto; border-collapse: collapse; box-sizing: border-box;"><thead style="line-height: 160%; box-sizing: content-box;"><tr style="line-height: 160%; box-sizing: content-box;"><th style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #72777b; border-top: 0; background-color: #7b8184; font-weight: 300; color: #fff; padding-top: 6px;">模式</th><th style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #72777b; border-top: 0; background-color: #7b8184; font-weight: 300; color: #fff; padding-top: 6px;">匹配路径</th><th style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #72777b; border-top: 0; background-color: #7b8184; font-weight: 300; color: #fff; padding-top: 6px;">$route.params</th></tr></thead><tbody style="line-height: 160%; box-sizing: content-box;"><tr style="line-height: 160%; box-sizing: content-box;"><td style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">/user/:username</td><td style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">/user/evan</td><td style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">{ username: 'evan' }</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">/user/:username/post/:post_id</td><td style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">/user/evan/post/123</td><td style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">{ username: 'evan', post_id: '123' }</td></tr></tbody></table>
<ol start="2" style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">假设现在需要跳转到：/user/liyang  <strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">推荐</strong></p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">配置路由</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> router = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> VueRouter({
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">routes</span>: [
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 动态路径参数 以冒号开头</span>
    { <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/user/:id'</span>, <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">component</span>: User }
  ]
})
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用router-link跳转页面</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 字符串拼接--&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"'/user/'+id"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 命名路由 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"{ name:'user', params:{id:'liyang'} }"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">假设现在需要跳转到：/user?id=liyang</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">配置路由</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> router = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> VueRouter({
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">routes</span>: [
    { <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/user'</span>, <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">component</span>: User }
  ]
})
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用router-link跳转页面</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 字符串拼接--&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"'/user?id='+id"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 命名路由 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"{ name:'user', query:{id:'liyang'} }"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
</code></pre>
</li>
</ol>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">提示：</strong> 如果路由 从 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/user/foo</code> 导航到 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/user/bar</code>，原来的组件会被复用，生命周期钩子不会再被调用。如果还想对路由参数的变化作出响应的话，可以使用 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">watch</code> (监测变化) $route 对象：<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> User = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">template</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'...'</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">watch</span>: {
    $route(to, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span>) {
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 对路由变化作出响应...</span>
    }
  }
}
</code></pre>
</li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">三）项目中的使用</h5>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">确定路由的方式 - /detail/:goodsId</li>
<li style="line-height: 160%; box-sizing: content-box;">准备路由匹配的页面 - 商品详情页</li>
<li style="line-height: 160%; box-sizing: content-box;">声明式跳转 - 命名路由 / 字符串拼接</li>
<li style="line-height: 160%; box-sizing: content-box;">详情页获取数据 - this.$route.params.goodsId</li>
</ol>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">编程式跳转</h3>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">一）跳转方式</h5>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">页面模板中使用方法 - 配合行内事件，实现简单业务逻辑</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.push()</code> - 会产生历史记录</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.replace()</code> - 不会产生历史记录</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.go(-1)</code> - 正:前进或负:后退</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">路由的写法：</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.push("/pro/"+proId)</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.push({name:"pro", params:{proId:id}})</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.push({path:"/pro"+proId})</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">js中使用方法 - 实例的选项中使用</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$router.push()</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$router.replace()</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$router.go(-1)</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">路由的写法</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$router.push("/pro/"+proId)</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$router.push({name:"pro", params:{proId:id}})</code></li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$router.push("/pro/"+proId)</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">params方式传输的数据，解析：</p>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$route.params.参数名</code></li>
<li style="line-height: 160%; box-sizing: content-box;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$route.params.参数名</code></li>
</ol>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">query方式传输的数据，解析：</p>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$route.query.参数名</code></li>
<li style="line-height: 160%; box-sizing: content-box;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">this.$route.query.参数名</code></li>
</ol>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、添加详情页组件及路由</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">准备详情页页面</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在views中创建detail页面组件</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注册路由</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">详情页没有页面底部区域，将主页面的底部导航区域封装成组件，使用 命名视图方式 渲染到各大一级页面</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">商品详情页不需要底部组件，不需要注册</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">设定商品详情页的动态路由，用于传输商品id</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">注册路由对象为：<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">{ path: '/detail/:id', components: Detail }</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">路由跳转</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用 编程式跳转 并发送商品id</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$router.push("/pro/"+proId)</code></li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">五、获取详情页的数据</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">在商品列表页面使用：声明式跳转 或 编程式跳转，切换到商品详情页路由</li>
<li style="line-height: 160%; box-sizing: content-box;">使用 params 或 query 方式，将当前商品的唯一ID携带</li>
<li style="line-height: 160%; box-sizing: content-box;">在商品详情页detail页面中，使用$route解析当前路由中的商品ID数据</li>
<li style="line-height: 160%; box-sizing: content-box;">根据商品ID，发起请求，获取商品详情信息，渲染商品内容</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">六、预览图片效果</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">使用<a href="https://youzan.github.io/vant/#/zh-CN/image-preview" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">图片预览组件</a>，实现图片放大效果</li>
<li style="line-height: 160%; box-sizing: content-box;">根据组件提供API，简单自定义放大效果</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">七、详情页底部处理</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">使用<a href="https://youzan.github.io/vant/#/zh-CN/goods-action" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">商品导航组件</a>，添加商品详情底部的导航结构</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">八、详情页商品数据处理</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">解析商品数据，设置data数据，解析到页面，调整样式布局</li>
<li style="line-height: 160%; box-sizing: content-box;">注意当商品信息区域内容超出首屏空间时，页面的滚动处理，及底部导航的遮盖区域</li>
</ol>
<hr style="line-height: 160%; box-sizing: content-box; border-top: 1px solid #eee; margin: 16px 0;"/>
<hr style="line-height: 160%; box-sizing: content-box; border-top: 1px solid #eee; margin: 16px 0;"/>
<hr style="line-height: 160%; box-sizing: content-box; border-top: 1px solid #eee; margin: 16px 0;"/>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">一、注册</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">准备注册页面</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在views中创建register页面组件</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">配置注册路由</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">{ path: '/register', component: Register }</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">页面头部设置</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/nav-bar" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">导航栏组件</a> 添加头部区域，并设置返回上一页功能</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">表单信息设置</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/form" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">表单组件</a> 添加表单信息，准备收集用户信息</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">表单验证 + 提示信息</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">自定义验证信息，配合<a href="https://youzan.github.io/vant/#/zh-CN/icon" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">Icon组件</a> 显示验证结果</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">必要时可使用 <a href="https://youzan.github.io/vant/#/zh-CN/toast" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">轻提示组件</a> 自定义提示信息</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">发送短信验证码按钮的设置</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/field#cha-ru-an-niu" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">输入框插入按钮组件</a> ，设置发送短信按钮</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">点击发送短信后，设置按钮不可用，并显示倒计时信息</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">倒计时结束后，可再次点击发送</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">发送短信验证码</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在 api -&gt; index.js 中，封装发送短信验证码接口</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在正确输入手机号的情况下，可请求短信验证码接口，准备获取短信验证码</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置注册按钮的可用状态</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">表单输入项如果有验证失败，需要禁用注册按钮</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">全部输入项成功，则启用注册按钮</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">点击注册</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在 api -&gt; index.js 中，封装注册接口</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">点击注册按钮，请求注册接口，处理请求成功后，配合轻提示组件，提示注册结果</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">注册成功后，使用编程时路由跳转，可选跳转到 登录 或 打开注册前 的路由</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、登录</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">准备注册页面</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在views中创建login页面组件</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">配置注册路由</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">{ path: '/login', component: Login }</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">页面头部设置</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">表单信息设置</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">表单验证 + 提示信息</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设置登录按钮的可用状态</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">点击登录</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在 api -&gt; index.js 中，封装登录接口</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">点击登录按钮，请求登录接口，处理请求成功后，配合轻提示组件，提示登录结果</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">登录成功后
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">存储登录成功的token和用户id</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用编程时路由跳转，可选跳转到 首页 或 登录前 的路由</li>
</ul>
</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">优化 注册页面 和 登录页面</p>
</li>
</ol>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%5Btoc%5D%0A%23%20%E4%B8%80%E3%80%81%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E8%B7%B3%E8%BD%AC%0A1.%20%E9%9C%80%E6%B1%82%0A%20%20%20%20-%20%E7%82%B9%E5%87%BB%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%E4%B8%AD%E7%9A%84%E5%95%86%E5%93%81%EF%BC%8C%E8%B7%B3%E8%BD%AC%E5%88%B0%E8%AF%A6%E6%83%85%E9%A1%B5%0A%20%20%20%20-%20%E6%A0%B9%E6%8D%AE%E7%82%B9%E5%87%BB%E5%95%86%E5%93%81%E7%9A%84%E4%B8%8D%E5%90%8C%EF%BC%8C%E6%89%93%E5%BC%80%E7%9A%84%E8%AF%A6%E6%83%85%E9%A1%B5%E6%B8%B2%E6%9F%93%E4%B8%8D%E5%90%8C%E7%9A%84%E6%95%B0%E6%8D%AE%0A2.%20%E6%8A%80%E6%9C%AF%E7%82%B9%0A%20%20%20%20-%20%E5%87%86%E5%A4%87%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D%E7%9A%84%E9%A1%B5%E9%9D%A2%0A%20%20%20%20%20%20%20%20-%20%E8%AF%A6%E6%83%85%E9%A1%B5%E5%B8%83%E5%B1%80%EF%BC%9A**%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE%2F%E5%A4%9A%E8%A7%86%E5%9B%BE%E8%B7%AF%E7%94%B1**%EF%BC%88%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%E6%8E%A7%E5%88%B6%E5%A4%9A%E4%B8%AA%E8%A7%86%E5%9B%BE%E7%9A%84%E5%8F%98%E5%8C%96%EF%BC%89%0A%20%20%20%20-%20**%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC**%0A%20%20%20%20%20%20%20%20-%20%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F%20-%20%E7%A1%AE%E5%AE%9A%E5%A5%BD%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F%0A%20%20%20%20%20%20%20%20-%20%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%0A%20%20%20%20-%20**%E8%AF%A6%E6%83%85%E9%A1%B5%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE**%EF%BC%9A%E5%8C%B9%E9%85%8D%E5%88%B0%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%24route.params.%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%0A%0A%23%20%E4%BA%8C%E3%80%81%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE%0A1.%20%E5%A6%82%E6%9E%9C%E9%9C%80%E8%A6%81%E5%90%8C%E6%97%B6%E5%B1%95%E7%A4%BA%E5%A4%9A%E4%B8%AA%E8%A7%86%E5%9B%BE%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E5%B5%8C%E5%A5%97%E5%B1%95%E7%A4%BA%EF%BC%8C%E8%BF%99%E6%97%B6%E5%B0%B1%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE%0A2.%20%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE%E5%8F%AF%E4%BB%A5%E5%9C%A8%E7%95%8C%E9%9D%A2%E4%B8%AD%E6%8B%A5%E6%9C%89%E5%A4%9A%E4%B8%AA%E5%8D%95%E7%8B%AC%E5%91%BD%E5%90%8D%E7%9A%84%E8%A7%86%E5%9B%BE%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%8D%95%E7%8B%AC%E7%9A%84%E5%87%BA%E5%8F%A3%0A3.%20%E5%A6%82%E6%9E%9C%20router-view%20%E6%B2%A1%E6%9C%89%E8%AE%BE%E7%BD%AE%E5%90%8D%E5%AD%97%EF%BC%8C%E9%82%A3%E4%B9%88%E9%BB%98%E8%AE%A4%E4%B8%BA%20default%E3%80%82%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Crouter-view%20name%3D%22header%22%3E%3C%2Frouter-view%3E%0A%20%20%20%20%3Crouter-view%3E%3C%2Frouter-view%3E%0A%20%20%20%20%3Crouter-view%20name%3D%22footer%22%3E%3C%2Frouter-view%3E%0A%20%20%20%20%60%60%60%0A4.%20%E4%B8%80%E4%B8%AA%E8%A7%86%E5%9B%BE%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E6%89%80%E4%BB%A5%EF%BC%8C%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%E5%A4%9A%E4%B8%AA%E8%A7%86%E5%9B%BE%EF%BC%8C%E5%B0%B1%E9%9C%80%E8%A6%81%E5%A4%9A%E4%B8%AA%E7%BB%84%E4%BB%B6%E3%80%82%E6%AD%A4%E6%97%B6%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%20components%20%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%20(%E6%B3%A8%E6%84%8F%E5%B8%A6%E4%B8%8A%20s)%0A%20%20%20%20%60%60%60js%0A%20%20%20%20import%20Foo%20from%20'..%2Fviews%2Fhome%2Findex.vue'%0A%20%20%20%20import%20Footer%20from%20'..%2Fcomponents%2Ffooter'%0A%20%20%20%20import%20Header%20from%20'..%2Fcomponents%2Fheader'%0A%20%20%20%20const%20router%20%3D%20new%20VueRouter(%7B%0A%20%20%20%20%20%20routes%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20path%3A%20'%2F'%2C%0A%20%20%20%20%20%20%20%20%20%20components%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20default%3A%20Foo%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20header%3A%20Header%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20footer%3A%20Footer%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D)%0A%20%20%20%20%60%60%60%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC%0A1.%20%E5%A3%B0%E6%98%8E%E5%BC%8F%E8%B7%B3%E8%BD%AC%20-%20%E6%A0%87%E7%AD%BE%E8%B7%B3%E8%BD%AC%0A2.%20%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%B3%E8%BD%AC%20-%20js%E8%B7%B3%E8%BD%AC%0A3.%20url%E8%A7%A3%E6%9E%90%0A!%5B041c501ab2e154ebdb26142082e6415f.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp722)%0A%0A%0A%23%23%23%20%E5%A3%B0%E6%98%8E%E5%BC%8F%E8%B7%B3%E8%BD%AC%0A%23%23%23%23%23%20%E4%B8%80%EF%BC%89%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F%0A1.%20push%E8%B7%B3%E8%BD%AC%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Crouter-link%20to%3D%22%E8%B7%AF%E7%94%B1%22%3E%3C%2Frouter-link%3E%0A%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E7%9B%B8%E5%BD%93%E4%BA%8E%E8%B0%83%E7%94%A8%E4%BA%86%20router.push()%20%E6%96%B9%E6%B3%95%EF%BC%8C%E8%BF%99%E4%B8%AA%E5%80%BC%E5%8F%AF%E4%BB%A5%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%88%96%E8%80%85%E6%98%AF%E6%8F%8F%E8%BF%B0%E7%9B%AE%E6%A0%87%E4%BD%8D%E7%BD%AE%E7%9A%84%E5%AF%B9%E8%B1%A1%E3%80%82%0A%20%20%20%20-%20%E8%A1%A8%E7%A4%BA**%E6%B7%BB%E5%8A%A0**%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%EF%BC%8C**%E4%BC%9A%E4%BA%A7%E7%94%9F%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95**%EF%BC%8C%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E4%B9%8B%E5%90%8E**%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E5%90%8E%E9%80%80%E6%8C%89%E9%92%AE%E8%BF%94%E5%9B%9E**%0A%0A2.%20replace%E8%B7%B3%E8%BD%AC%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Crouter-link%20to%3D%22%E8%B7%AF%E7%94%B1%22%20replace%3E%3C%2Frouter-link%3E%0A%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E7%9B%B8%E5%BD%93%E4%BA%8E%E8%B0%83%E7%94%A8%E4%BA%86%20router.replace()%20%E6%96%B9%E6%B3%95%EF%BC%8C%E8%BF%99%E4%B8%AA%E5%80%BC%E5%8F%AF%E4%BB%A5%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%88%96%E8%80%85%E6%98%AF%E6%8F%8F%E8%BF%B0%E7%9B%AE%E6%A0%87%E4%BD%8D%E7%BD%AE%E7%9A%84%E5%AF%B9%E8%B1%A1%E3%80%82%0A%20%20%20%20-%20%E8%A1%A8%E7%A4%BA**%E6%9B%BF%E6%8D%A2**%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%EF%BC%8C**%E4%B8%8D%E4%BC%9A%E4%BA%A7%E7%94%9F%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95**%EF%BC%8C%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E4%B9%8B%E5%90%8E**%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87%E5%90%8E%E9%80%80%E6%8C%89%E9%92%AE%E8%BF%94%E5%9B%9E**%0A%0A%23%23%23%23%23%20%E4%BA%8C%EF%BC%89%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%0A1.%20**%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D**%0A%20%20%20%20-%20%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%8C%B9%E9%85%8D%E5%A4%9A%E4%B8%AA%E5%90%8C%E7%A7%8D%E6%A8%A1%E5%BC%8F%E7%9A%84%E8%B7%AF%E7%94%B1%EF%BC%8C%E6%AF%8F%E4%B8%AA%E8%B7%AF%E7%94%B1%E4%B9%8B%E9%97%B4%E7%94%B1%E5%8F%82%E6%95%B0%E5%8C%BA%E5%88%86%0A%20%20%20%20-%20%E5%A6%82%EF%BC%9AUser%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%AF%8F%E4%B8%AA%E7%94%A8%E6%88%B7%E5%AF%B9%E5%BA%94%E4%B8%8D%E5%90%8C%E7%9A%84ID%EF%BC%8C%E4%BD%86%E6%98%AF%E9%83%BD%E9%9C%80%E8%A6%81User%E7%BB%84%E4%BB%B6%E6%9D%A5%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E8%BF%9B%E8%A1%8C%E5%8C%B9%E9%85%8D%EF%BC%9A%60%7Bpath%3A%20'%2Fuser%2F%3Aid'%7D%60%0A%20%20%20%20-%20%E5%BD%93%E5%8C%B9%E9%85%8D%E5%88%B0%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%E6%97%B6%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%60%24route.params.id%60%E8%8E%B7%E5%8F%96%E6%8E%A5%E6%94%B6%E5%88%B0%E7%9A%84id%E4%BF%A1%E6%81%AF%0A%20%20%20%20-%20%E5%8F%AF%E4%BB%A5%E5%9C%A8%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%E4%B8%AD%E8%AE%BE%E7%BD%AE%E5%A4%9A%E6%AE%B5%22%E8%B7%AF%E5%BE%84%E5%8F%82%E6%95%B0%22%EF%BC%8C%E5%AF%B9%E5%BA%94%E7%9A%84%E5%80%BC%E9%83%BD%E4%BC%9A%E8%AE%BE%E7%BD%AE%E5%88%B0%20%24route.params%20%E4%B8%AD%E3%80%82%E4%BE%8B%E5%A6%82%EF%BC%9A%0A%0A%7C%E6%A8%A1%E5%BC%8F%7C%E5%8C%B9%E9%85%8D%E8%B7%AF%E5%BE%84%7C%24route.params%0A%7C-%7C-%7C-%7C%0A%7C%20%2Fuser%2F%3Ausername%20%7C%20%2Fuser%2Fevan%20%7C%20%7B%20username%3A%20'evan'%20%7D%20%7C%0A%7C%20%2Fuser%2F%3Ausername%2Fpost%2F%3Apost_id%20%7C%20%2Fuser%2Fevan%2Fpost%2F123%20%7C%20%7B%20username%3A%20'evan'%2C%20post_id%3A%20'123'%20%7D%0A%0A2.%20%E5%81%87%E8%AE%BE%E7%8E%B0%E5%9C%A8%E9%9C%80%E8%A6%81%E8%B7%B3%E8%BD%AC%E5%88%B0%EF%BC%9A%2Fuser%2Fliyang%20%20**%E6%8E%A8%E8%8D%90**%0A%20%20%20%20-%20%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%0A%20%20%20%20%60%60%60js%0A%20%20%20%20const%20router%20%3D%20new%20VueRouter(%7B%0A%20%20%20%20%20%20routes%3A%20%5B%0A%20%20%20%20%20%20%20%20%2F%2F%20%E5%8A%A8%E6%80%81%E8%B7%AF%E5%BE%84%E5%8F%82%E6%95%B0%20%E4%BB%A5%E5%86%92%E5%8F%B7%E5%BC%80%E5%A4%B4%0A%20%20%20%20%20%20%20%20%7B%20path%3A%20'%2Fuser%2F%3Aid'%2C%20component%3A%20User%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D)%0A%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8router-link%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3C!--%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5--%3E%0A%20%20%20%20%3Crouter-link%20%3Ato%3D%22'%2Fuser%2F'%2Bid%22%3E%3C%2Frouter-link%3E%0A%20%20%20%20%3C!--%20%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1%20--%3E%0A%20%20%20%20%3Crouter-link%20%3Ato%3D%22%7B%20name%3A'user'%2C%20params%3A%7Bid%3A'liyang'%7D%20%7D%22%3E%3C%2Frouter-link%3E%0A%20%20%20%20%60%60%60%0A%20%20%20%20%0A3.%20%E5%81%87%E8%AE%BE%E7%8E%B0%E5%9C%A8%E9%9C%80%E8%A6%81%E8%B7%B3%E8%BD%AC%E5%88%B0%EF%BC%9A%2Fuser%3Fid%3Dliyang%0A%20%20%20%20-%20%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%0A%20%20%20%20%60%60%60js%0A%20%20%20%20const%20router%20%3D%20new%20VueRouter(%7B%0A%20%20%20%20%20%20routes%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%20path%3A%20'%2Fuser'%2C%20component%3A%20User%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D)%0A%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8router-link%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3C!--%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5--%3E%0A%20%20%20%20%3Crouter-link%20%3Ato%3D%22'%2Fuser%3Fid%3D'%2Bid%22%3E%3C%2Frouter-link%3E%0A%20%20%20%20%3C!--%20%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1%20--%3E%0A%20%20%20%20%3Crouter-link%20%3Ato%3D%22%7B%20name%3A'user'%2C%20query%3A%7Bid%3A'liyang'%7D%20%7D%22%3E%3C%2Frouter-link%3E%0A%20%20%20%20%60%60%60%0A%0A-%20**%E6%8F%90%E7%A4%BA%EF%BC%9A**%20%E5%A6%82%E6%9E%9C%E8%B7%AF%E7%94%B1%20%E4%BB%8E%20%60%2Fuser%2Ffoo%60%20%E5%AF%BC%E8%88%AA%E5%88%B0%20%60%2Fuser%2Fbar%60%EF%BC%8C%E5%8E%9F%E6%9D%A5%E7%9A%84%E7%BB%84%E4%BB%B6%E4%BC%9A%E8%A2%AB%E5%A4%8D%E7%94%A8%EF%BC%8C%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E4%B8%8D%E4%BC%9A%E5%86%8D%E8%A2%AB%E8%B0%83%E7%94%A8%E3%80%82%E5%A6%82%E6%9E%9C%E8%BF%98%E6%83%B3%E5%AF%B9%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96%E4%BD%9C%E5%87%BA%E5%93%8D%E5%BA%94%E7%9A%84%E8%AF%9D%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20%60watch%60%20(%E7%9B%91%E6%B5%8B%E5%8F%98%E5%8C%96)%20%24route%20%E5%AF%B9%E8%B1%A1%EF%BC%9A%0A%20%20%20%20%60%60%60js%0A%20%20%20%20const%20User%20%3D%20%7B%0A%20%20%20%20%20%20template%3A%20'...'%2C%0A%20%20%20%20%20%20watch%3A%20%7B%0A%20%20%20%20%20%20%20%20%24route(to%2C%20from)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AF%B9%E8%B7%AF%E7%94%B1%E5%8F%98%E5%8C%96%E4%BD%9C%E5%87%BA%E5%93%8D%E5%BA%94...%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20%60%60%60%0A%0A%0A%23%23%23%23%23%20%E4%B8%89%EF%BC%89%E9%A1%B9%E7%9B%AE%E4%B8%AD%E7%9A%84%E4%BD%BF%E7%94%A8%0A1.%20%E7%A1%AE%E5%AE%9A%E8%B7%AF%E7%94%B1%E7%9A%84%E6%96%B9%E5%BC%8F%20-%20%2Fdetail%2F%3AgoodsId%0A2.%20%E5%87%86%E5%A4%87%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D%E7%9A%84%E9%A1%B5%E9%9D%A2%20-%20%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%0A3.%20%E5%A3%B0%E6%98%8E%E5%BC%8F%E8%B7%B3%E8%BD%AC%20-%20%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1%20%2F%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5%0A4.%20%E8%AF%A6%E6%83%85%E9%A1%B5%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%20-%20this.%24route.params.goodsId%0A%0A%0A%0A%23%23%23%20%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%B3%E8%BD%AC%0A%23%23%23%23%23%20%E4%B8%80%EF%BC%89%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F%0A1.%20%E9%A1%B5%E9%9D%A2%E6%A8%A1%E6%9D%BF%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%20-%20%E9%85%8D%E5%90%88%E8%A1%8C%E5%86%85%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%0A%20%20%20%20-%20%60%24router.push()%60%20-%20%E4%BC%9A%E4%BA%A7%E7%94%9F%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%0A%20%20%20%20-%20%60%24router.replace()%60%20-%20%E4%B8%8D%E4%BC%9A%E4%BA%A7%E7%94%9F%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%0A%20%20%20%20-%20%60%24router.go(-1)%60%20-%20%E6%AD%A3%3A%E5%89%8D%E8%BF%9B%E6%88%96%E8%B4%9F%3A%E5%90%8E%E9%80%80%0A%0A2.%20%E8%B7%AF%E7%94%B1%E7%9A%84%E5%86%99%E6%B3%95%EF%BC%9A%0A%20%20%20%20-%20%60%24router.push(%22%2Fpro%2F%22%2BproId)%60%0A%20%20%20%20-%20%60%24router.push(%7Bname%3A%22pro%22%2C%20params%3A%7BproId%3Aid%7D%7D)%60%0A%20%20%20%20-%20%60%24router.push(%7Bpath%3A%22%2Fpro%22%2BproId%7D)%60%0A%0A%0A3.%20js%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%20-%20%E5%AE%9E%E4%BE%8B%E7%9A%84%E9%80%89%E9%A1%B9%E4%B8%AD%E4%BD%BF%E7%94%A8%0A%20%20%20%20-%20%60this.%24router.push()%60%0A%20%20%20%20-%20%60this.%24router.replace()%60%0A%20%20%20%20-%20%60this.%24router.go(-1)%60%0A%0A4.%20%E8%B7%AF%E7%94%B1%E7%9A%84%E5%86%99%E6%B3%95%0A%20%20%20%20-%20%60this.%24router.push(%22%2Fpro%2F%22%2BproId)%60%0A%20%20%20%20-%20%60this.%24router.push(%7Bname%3A%22pro%22%2C%20params%3A%7BproId%3Aid%7D%7D)%60%0A%20%20%20%20-%20%60this.%24router.push(%22%2Fpro%2F%22%2BproId)%60%0A%0A5.%20params%E6%96%B9%E5%BC%8F%E4%BC%A0%E8%BE%93%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%A7%A3%E6%9E%90%EF%BC%9A%0A%20%20%20%201.%20%60%24route.params.%E5%8F%82%E6%95%B0%E5%90%8D%60%0A%20%20%20%202.%20%60this.%24route.params.%E5%8F%82%E6%95%B0%E5%90%8D%60%0A%0A5.%20query%E6%96%B9%E5%BC%8F%E4%BC%A0%E8%BE%93%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%A7%A3%E6%9E%90%EF%BC%9A%0A%20%20%20%201.%20%60%24route.query.%E5%8F%82%E6%95%B0%E5%90%8D%60%0A%20%20%20%202.%20%60this.%24route.query.%E5%8F%82%E6%95%B0%E5%90%8D%60%0A%0A%0A%23%20%E5%9B%9B%E3%80%81%E6%B7%BB%E5%8A%A0%E8%AF%A6%E6%83%85%E9%A1%B5%E7%BB%84%E4%BB%B6%E5%8F%8A%E8%B7%AF%E7%94%B1%0A1.%20%E5%87%86%E5%A4%87%E8%AF%A6%E6%83%85%E9%A1%B5%E9%A1%B5%E9%9D%A2%0A%20%20%20%20-%20%E5%9C%A8views%E4%B8%AD%E5%88%9B%E5%BB%BAdetail%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6%0A2.%20%E6%B3%A8%E5%86%8C%E8%B7%AF%E7%94%B1%0A%20%20%20%20-%20%E8%AF%A6%E6%83%85%E9%A1%B5%E6%B2%A1%E6%9C%89%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8%E5%8C%BA%E5%9F%9F%EF%BC%8C%E5%B0%86%E4%B8%BB%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E5%8C%BA%E5%9F%9F%E5%B0%81%E8%A3%85%E6%88%90%E7%BB%84%E4%BB%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%20%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE%E6%96%B9%E5%BC%8F%20%E6%B8%B2%E6%9F%93%E5%88%B0%E5%90%84%E5%A4%A7%E4%B8%80%E7%BA%A7%E9%A1%B5%E9%9D%A2%0A%20%20%20%20-%20%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E4%B8%8D%E9%9C%80%E8%A6%81%E5%BA%95%E9%83%A8%E7%BB%84%E4%BB%B6%EF%BC%8C%E4%B8%8D%E9%9C%80%E8%A6%81%E6%B3%A8%E5%86%8C%0A%20%20%20%20-%20%E8%AE%BE%E5%AE%9A%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E7%9A%84%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%EF%BC%8C%E7%94%A8%E4%BA%8E%E4%BC%A0%E8%BE%93%E5%95%86%E5%93%81id%0A%20%20%20%20-%20%E6%B3%A8%E5%86%8C%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E4%B8%BA%EF%BC%9A%60%7B%20path%3A%20'%2Fdetail%2F%3Aid'%2C%20components%3A%20Detail%20%7D%60%0A%0A3.%20%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%20%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%B3%E8%BD%AC%20%E5%B9%B6%E5%8F%91%E9%80%81%E5%95%86%E5%93%81id%0A%20%20%20%20-%20%60%24router.push(%22%2Fpro%2F%22%2BproId)%60%0A%0A%23%20%E4%BA%94%E3%80%81%E8%8E%B7%E5%8F%96%E8%AF%A6%E6%83%85%E9%A1%B5%E7%9A%84%E6%95%B0%E6%8D%AE%0A1.%20%E5%9C%A8%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%E9%A1%B5%E9%9D%A2%E4%BD%BF%E7%94%A8%EF%BC%9A%E5%A3%B0%E6%98%8E%E5%BC%8F%E8%B7%B3%E8%BD%AC%20%E6%88%96%20%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%B3%E8%BD%AC%EF%BC%8C%E5%88%87%E6%8D%A2%E5%88%B0%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E8%B7%AF%E7%94%B1%0A2.%20%E4%BD%BF%E7%94%A8%20params%20%E6%88%96%20query%20%E6%96%B9%E5%BC%8F%EF%BC%8C%E5%B0%86%E5%BD%93%E5%89%8D%E5%95%86%E5%93%81%E7%9A%84%E5%94%AF%E4%B8%80ID%E6%90%BA%E5%B8%A6%0A3.%20%E5%9C%A8%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5detail%E9%A1%B5%E9%9D%A2%E4%B8%AD%EF%BC%8C%E4%BD%BF%E7%94%A8%24route%E8%A7%A3%E6%9E%90%E5%BD%93%E5%89%8D%E8%B7%AF%E7%94%B1%E4%B8%AD%E7%9A%84%E5%95%86%E5%93%81ID%E6%95%B0%E6%8D%AE%0A4.%20%E6%A0%B9%E6%8D%AE%E5%95%86%E5%93%81ID%EF%BC%8C%E5%8F%91%E8%B5%B7%E8%AF%B7%E6%B1%82%EF%BC%8C%E8%8E%B7%E5%8F%96%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E4%BF%A1%E6%81%AF%EF%BC%8C%E6%B8%B2%E6%9F%93%E5%95%86%E5%93%81%E5%86%85%E5%AE%B9%0A%0A%23%20%E5%85%AD%E3%80%81%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87%E6%95%88%E6%9E%9C%0A1.%20%E4%BD%BF%E7%94%A8%5B%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fimage-preview)%EF%BC%8C%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7%E6%95%88%E6%9E%9C%0A2.%20%E6%A0%B9%E6%8D%AE%E7%BB%84%E4%BB%B6%E6%8F%90%E4%BE%9BAPI%EF%BC%8C%E7%AE%80%E5%8D%95%E8%87%AA%E5%AE%9A%E4%B9%89%E6%94%BE%E5%A4%A7%E6%95%88%E6%9E%9C%0A%0A%23%20%E4%B8%83%E3%80%81%E8%AF%A6%E6%83%85%E9%A1%B5%E5%BA%95%E9%83%A8%E5%A4%84%E7%90%86%0A1.%20%E4%BD%BF%E7%94%A8%5B%E5%95%86%E5%93%81%E5%AF%BC%E8%88%AA%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fgoods-action)%EF%BC%8C%E6%B7%BB%E5%8A%A0%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E5%BA%95%E9%83%A8%E7%9A%84%E5%AF%BC%E8%88%AA%E7%BB%93%E6%9E%84%0A%0A%23%20%E5%85%AB%E3%80%81%E8%AF%A6%E6%83%85%E9%A1%B5%E5%95%86%E5%93%81%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86%0A1.%20%E8%A7%A3%E6%9E%90%E5%95%86%E5%93%81%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%AE%BE%E7%BD%AEdata%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%A7%A3%E6%9E%90%E5%88%B0%E9%A1%B5%E9%9D%A2%EF%BC%8C%E8%B0%83%E6%95%B4%E6%A0%B7%E5%BC%8F%E5%B8%83%E5%B1%80%0A2.%20%E6%B3%A8%E6%84%8F%E5%BD%93%E5%95%86%E5%93%81%E4%BF%A1%E6%81%AF%E5%8C%BA%E5%9F%9F%E5%86%85%E5%AE%B9%E8%B6%85%E5%87%BA%E9%A6%96%E5%B1%8F%E7%A9%BA%E9%97%B4%E6%97%B6%EF%BC%8C%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%BB%9A%E5%8A%A8%E5%A4%84%E7%90%86%EF%BC%8C%E5%8F%8A%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E7%9A%84%E9%81%AE%E7%9B%96%E5%8C%BA%E5%9F%9F%0A%0A%0A%0A%0A---%0A%0A---%0A%0A---%0A%0A%0A%0A%0A%23%20%E4%B8%80%E3%80%81%E6%B3%A8%E5%86%8C%0A1.%20%E5%87%86%E5%A4%87%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%0A%20%20%20%20-%20%E5%9C%A8views%E4%B8%AD%E5%88%9B%E5%BB%BAregister%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6%0A2.%20%E9%85%8D%E7%BD%AE%E6%B3%A8%E5%86%8C%E8%B7%AF%E7%94%B1%0A%20%20%20%20-%20%60%7B%20path%3A%20'%2Fregister'%2C%20component%3A%20Register%20%7D%60%0A%0A3.%20%E9%A1%B5%E9%9D%A2%E5%A4%B4%E9%83%A8%E8%AE%BE%E7%BD%AE%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%20%5B%E5%AF%BC%E8%88%AA%E6%A0%8F%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fnav-bar)%20%E6%B7%BB%E5%8A%A0%E5%A4%B4%E9%83%A8%E5%8C%BA%E5%9F%9F%EF%BC%8C%E5%B9%B6%E8%AE%BE%E7%BD%AE%E8%BF%94%E5%9B%9E%E4%B8%8A%E4%B8%80%E9%A1%B5%E5%8A%9F%E8%83%BD%0A%0A4.%20%E8%A1%A8%E5%8D%95%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%20%5B%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fform)%20%E6%B7%BB%E5%8A%A0%E8%A1%A8%E5%8D%95%E4%BF%A1%E6%81%AF%EF%BC%8C%E5%87%86%E5%A4%87%E6%94%B6%E9%9B%86%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%0A%0A5.%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20%2B%20%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%0A%20%20%20%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E9%AA%8C%E8%AF%81%E4%BF%A1%E6%81%AF%EF%BC%8C%E9%85%8D%E5%90%88%5BIcon%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Ficon)%20%E6%98%BE%E7%A4%BA%E9%AA%8C%E8%AF%81%E7%BB%93%E6%9E%9C%0A%20%20%20%20-%20%E5%BF%85%E8%A6%81%E6%97%B6%E5%8F%AF%E4%BD%BF%E7%94%A8%20%5B%E8%BD%BB%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Ftoast)%20%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%0A%20%20%20%20%0A6.%20%E5%8F%91%E9%80%81%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81%E6%8C%89%E9%92%AE%E7%9A%84%E8%AE%BE%E7%BD%AE%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%20%5B%E8%BE%93%E5%85%A5%E6%A1%86%E6%8F%92%E5%85%A5%E6%8C%89%E9%92%AE%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Ffield%23cha-ru-an-niu)%20%EF%BC%8C%E8%AE%BE%E7%BD%AE%E5%8F%91%E9%80%81%E7%9F%AD%E4%BF%A1%E6%8C%89%E9%92%AE%0A%20%20%20%20-%20%E7%82%B9%E5%87%BB%E5%8F%91%E9%80%81%E7%9F%AD%E4%BF%A1%E5%90%8E%EF%BC%8C%E8%AE%BE%E7%BD%AE%E6%8C%89%E9%92%AE%E4%B8%8D%E5%8F%AF%E7%94%A8%EF%BC%8C%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%80%92%E8%AE%A1%E6%97%B6%E4%BF%A1%E6%81%AF%0A%20%20%20%20-%20%E5%80%92%E8%AE%A1%E6%97%B6%E7%BB%93%E6%9D%9F%E5%90%8E%EF%BC%8C%E5%8F%AF%E5%86%8D%E6%AC%A1%E7%82%B9%E5%87%BB%E5%8F%91%E9%80%81%0A%0A7.%20%E5%8F%91%E9%80%81%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81%0A%20%20%20%20-%20%E5%9C%A8%20api%20-%3E%20index.js%20%E4%B8%AD%EF%BC%8C%E5%B0%81%E8%A3%85%E5%8F%91%E9%80%81%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81%E6%8E%A5%E5%8F%A3%0A%20%20%20%20-%20%E5%9C%A8%E6%AD%A3%E7%A1%AE%E8%BE%93%E5%85%A5%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E5%8F%AF%E8%AF%B7%E6%B1%82%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81%E6%8E%A5%E5%8F%A3%EF%BC%8C%E5%87%86%E5%A4%87%E8%8E%B7%E5%8F%96%E7%9F%AD%E4%BF%A1%E9%AA%8C%E8%AF%81%E7%A0%81%0A%0A8.%20%E8%AE%BE%E7%BD%AE%E6%B3%A8%E5%86%8C%E6%8C%89%E9%92%AE%E7%9A%84%E5%8F%AF%E7%94%A8%E7%8A%B6%E6%80%81%0A%20%20%20%20-%20%E8%A1%A8%E5%8D%95%E8%BE%93%E5%85%A5%E9%A1%B9%E5%A6%82%E6%9E%9C%E6%9C%89%E9%AA%8C%E8%AF%81%E5%A4%B1%E8%B4%A5%EF%BC%8C%E9%9C%80%E8%A6%81%E7%A6%81%E7%94%A8%E6%B3%A8%E5%86%8C%E6%8C%89%E9%92%AE%0A%20%20%20%20-%20%E5%85%A8%E9%83%A8%E8%BE%93%E5%85%A5%E9%A1%B9%E6%88%90%E5%8A%9F%EF%BC%8C%E5%88%99%E5%90%AF%E7%94%A8%E6%B3%A8%E5%86%8C%E6%8C%89%E9%92%AE%0A%0A9.%20%E7%82%B9%E5%87%BB%E6%B3%A8%E5%86%8C%0A%20%20%20%20-%20%E5%9C%A8%20api%20-%3E%20index.js%20%E4%B8%AD%EF%BC%8C%E5%B0%81%E8%A3%85%E6%B3%A8%E5%86%8C%E6%8E%A5%E5%8F%A3%0A%20%20%20%20-%20%E7%82%B9%E5%87%BB%E6%B3%A8%E5%86%8C%E6%8C%89%E9%92%AE%EF%BC%8C%E8%AF%B7%E6%B1%82%E6%B3%A8%E5%86%8C%E6%8E%A5%E5%8F%A3%EF%BC%8C%E5%A4%84%E7%90%86%E8%AF%B7%E6%B1%82%E6%88%90%E5%8A%9F%E5%90%8E%EF%BC%8C%E9%85%8D%E5%90%88%E8%BD%BB%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%8F%90%E7%A4%BA%E6%B3%A8%E5%86%8C%E7%BB%93%E6%9E%9C%0A%20%20%20%20-%20%E6%B3%A8%E5%86%8C%E6%88%90%E5%8A%9F%E5%90%8E%EF%BC%8C%E4%BD%BF%E7%94%A8%E7%BC%96%E7%A8%8B%E6%97%B6%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC%EF%BC%8C%E5%8F%AF%E9%80%89%E8%B7%B3%E8%BD%AC%E5%88%B0%20%E7%99%BB%E5%BD%95%20%E6%88%96%20%E6%89%93%E5%BC%80%E6%B3%A8%E5%86%8C%E5%89%8D%20%E7%9A%84%E8%B7%AF%E7%94%B1%0A%0A%0A%23%20%E4%BA%8C%E3%80%81%E7%99%BB%E5%BD%95%0A1.%20%E5%87%86%E5%A4%87%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%0A%20%20%20%20-%20%E5%9C%A8views%E4%B8%AD%E5%88%9B%E5%BB%BAlogin%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6%0A2.%20%E9%85%8D%E7%BD%AE%E6%B3%A8%E5%86%8C%E8%B7%AF%E7%94%B1%0A%20%20%20%20-%20%60%7B%20path%3A%20'%2Flogin'%2C%20component%3A%20Login%20%7D%60%0A%0A3.%20%E9%A1%B5%E9%9D%A2%E5%A4%B4%E9%83%A8%E8%AE%BE%E7%BD%AE%0A%0A4.%20%E8%A1%A8%E5%8D%95%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE%0A%0A5.%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20%2B%20%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%0A%0A6.%20%E8%AE%BE%E7%BD%AE%E7%99%BB%E5%BD%95%E6%8C%89%E9%92%AE%E7%9A%84%E5%8F%AF%E7%94%A8%E7%8A%B6%E6%80%81%0A%0A7.%20%E7%82%B9%E5%87%BB%E7%99%BB%E5%BD%95%0A%20%20%20%20-%20%E5%9C%A8%20api%20-%3E%20index.js%20%E4%B8%AD%EF%BC%8C%E5%B0%81%E8%A3%85%E7%99%BB%E5%BD%95%E6%8E%A5%E5%8F%A3%0A%20%20%20%20-%20%E7%82%B9%E5%87%BB%E7%99%BB%E5%BD%95%E6%8C%89%E9%92%AE%EF%BC%8C%E8%AF%B7%E6%B1%82%E7%99%BB%E5%BD%95%E6%8E%A5%E5%8F%A3%EF%BC%8C%E5%A4%84%E7%90%86%E8%AF%B7%E6%B1%82%E6%88%90%E5%8A%9F%E5%90%8E%EF%BC%8C%E9%85%8D%E5%90%88%E8%BD%BB%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%8F%90%E7%A4%BA%E7%99%BB%E5%BD%95%E7%BB%93%E6%9E%9C%0A%20%20%20%20-%20%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F%E5%90%8E%0A%20%20%20%20%20%20%20%20-%20%E5%AD%98%E5%82%A8%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F%E7%9A%84token%E5%92%8C%E7%94%A8%E6%88%B7id%0A%20%20%20%20%20%20%20%20-%20%E4%BD%BF%E7%94%A8%E7%BC%96%E7%A8%8B%E6%97%B6%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC%EF%BC%8C%E5%8F%AF%E9%80%89%E8%B7%B3%E8%BD%AC%E5%88%B0%20%E9%A6%96%E9%A1%B5%20%E6%88%96%20%E7%99%BB%E5%BD%95%E5%89%8D%20%E7%9A%84%E8%B7%AF%E7%94%B1%0A%0A8.%20%E4%BC%98%E5%8C%96%20%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2%20%E5%92%8C%20%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2%0A</center></body></html>